<template>
  <div class="category">
    <van-tabs v-model="tabCur"  @click="onClick">
      <van-tab v-for="item in allCategory" :name="item.id" :title="item.name" :key="item.id" >
        <div class="linehead">
          <img :src="curNav.banner_url" alt="">
          <div class="box">
            <div class="cate">
              {{curNav.name}}
            </div>
            <div class="desc">
              {{curNav.front_name}}
            </div>

          </div>
        </div>        
      </van-tab>

    </van-tabs>
    <GuessYouLike :inpRes="goodsList" :showTitle="true" class="cc"></GuessYouLike>

  </div>
  
</template>

<script>
import GuessYouLike from '@/components/guessLike'
export default {
  components:{
    GuessYouLike
  },
  name: "Category",
  data() {
    return {
      goodsList: [],
      tabCur:0,
      allCategory:[],
      // 当前点击的分类对象
      curNav:{},
    };
  },
  mounted() {
    this.tabCur = this.$route.query.id
    this.getDefault();
  },
  methods: {
    // 获取一级分类名与Id
    async getDefault() {
      let result = await this.$api.other.reqcategory1St();
      this.allCategory = result.category;
      if(!this.tabCur){
           this.tabCur = 1005000
      }
        let total = await this.$api.other.reqGoodsList({params:{id:this.tabCur}})
        this.curNav = total.curNav
        this.goodsList = total.goodsList          

    },

    // 点击获取分类
    async onClick(id){
      let total = await this.$api.other.reqGoodsList({params:{id:id}})
      this.curNav = total.curNav
      this.goodsList = total.goodsList
      
    }
  },
};
</script>

<style lang="less" scoped>
.category{
  
  width: 100%;
  
  .van-tabs {
    .van-tab{
      width: 100%;
    }
    width: 100%;
  }
  .linehead{
    text-align: center;
    width: 100%;
    .box{
      background-color: #fff;
      padding: 20px;
      .cate{
        width: 100%;
        font-size: 36px;
        color: #525252;
        letter-spacing: 10px;
      }
    }

      img{
        display: block;
        width: 100%;
      }
  }

}
   .cc{
     padding-bottom: 35px;
   }
</style>